<template>
    <div>
        <!-- <div>{{msg}} 我是一个demo </div>
        <div :class="textClass"> {{title}} </div>
        <bk-input :clearable="true" v-model="value"></bk-input>
        <bk-button :theme="'primary'"
            :title="'主要按钮'" class="mr10"
            @click="clickBtn">
            主要按钮
        </bk-button> -->
        <div class="list-all">
            <div class="list-head">
                <i class="bk-icon icon-dialogue"></i>
                消息列表
            </div>
            <div class="list-context">
                <div v-for="(item, ind) in list" :key="ind">
                    <Card :info="item" :number="ind" @getInfo="getInfo" />
                </div>
            </div>
        </div>
        <bk-dialog v-model="visible"
            theme="primary"
            :mask-close="false"
            title="消息内容">
            <div>{{info.content}}</div>
        </bk-dialog>
    </div>
</template>
<script>
    import Card from './card'
    export default {
        components: {
            Card
        },
        data () { // 操作简单时可以使用data，可以存放数据
            return {
                visible: false,
                msg: '首页',
                isHome: true,
                value: '',
                list: [
                    {
                        content: '你的"20181212112308"单据已通过',
                        date: '刚刚',
                        status: 'success'
                    },
                    {
                        content: '你的"20181212112308"单据被驳回',
                        date: '3分钟前',
                        status: 'error'
                    },
                    {
                        content: '你的"20181212112308"单据部分被驳回',
                        date: '58分钟前',
                        status: 'error'
                    },
                    {
                        content: 'ltt提醒您有待审核的单据',
                        date: '3天前',
                        status: 'success'
                    },
                    {
                        content: '你的“20181212112308”单据部分被驳回',
                        date: '12月14日'
                    },
                    {
                        content: 'jinnyyang 提醒了你',
                        date: '12月14日'
                    },
                    {
                        content: 'edwinwu 重新申请了“201812121108”内关于“蓝鲸作业平台”的权限申请。',
                        date: '12月14日'
                    }
                ],
                info: {}
            }
        },
        computed: { // 操作复杂时可以使用computed(计算属性)
            title () {
                return this.isHome ? '首页' : '蓝鲸'
            },
            test () {
                return this.msg
            },
            textClass () {
                return this.isHome ? 'weight red-color' : 'weight'
            }
        },
        watch: {
            value: function (newVal, oldVal) {
                this.msg = newVal
            }
        },
        mounted () {
            console.log('hello ltt') // 在console中可看
        },
        methods: { // 按钮点击后的动作
            clickBtn () {
                this.isHome = !this.isHome
            },
            getInfo (item) {
                this.visible = true
                console.log(item)
                this.info = item // 把item信息传给info
            }
        }
    }
</script>
<style lang="postcss">
    .red-color {
        color: red;
    }
    .weight {
        font-size: 22px;
        font-weight: 600;
    }
</style>
